<template>
	<uni-card title="24小时天气预报🌤" is-shadow>
		<view class="box">
			<view class="content">
				<view class="hourly" v-for="item in props.hourly" :key="item.fxTime">
					<view class="text-gray">{{item.time}}</view>
					
					<view class="text-primary mb-32">{{item.temp}}°</view>
					<view>{{item.windDir}}</view>
					<view class="text-gray">{{item.windScale}}级</view>
				</view>
			</view>
		</view>
		
	</uni-card>
</template>

<script setup>
	const props = defineProps(['hourly'])
</script>

<style lang="scss">
	.box{
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
		overflow-x: scroll;
	}
	.content{
		width: 2400rpx;
		display:flex;
		.hourly{
			flex:1;
			background: linear-gradient(to bottom, #6295f1, #f7f8fa);
			text-align: center;
		}
	}
</style>